<template>
  <div>
    <supertable
      class="bannertable"
      :tableData="tableData"
      :headerData="headerData"
      :isoperation="false"
      :ispagination="false"
    >
      <!-- 小图 -->
      <template v-slot:minigraph="row">
        <div>
          <el-image :src="row.row.minigraph"></el-image>
        </div>
      </template>
      <!-- 是否上架 -->
      <template v-slot:isOnSale="row">
        <div>
          <div @click="changeIsOnSaleFn(row.row)">
            <el-switch
              v-model="row.row.isOnSale"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </div>
        </div>
      </template>
      <!-- 是否推荐新品 -->
      <template v-slot:newgoods="row">
        <div>
          <el-tag
            :type="row.row.newgoods ? 'success' : 'warning'"
            v-show="row.row.newgoods"
            >是</el-tag
          >
          <el-tag
            :type="row.row.newgoods ? 'success' : 'warning'"
            v-show="!row.row.newgoods"
            >否</el-tag
          >
        </div>
      </template>
      <!-- 是否人气商品 -->
      <template v-slot:popular="row">
        <div>
          <el-tag
            :type="row.row.popular ? 'success' : 'warning'"
            v-show="row.row.popular"
            >是</el-tag
          >
          <el-tag
            :type="row.row.popular ? 'success' : 'warning'"
            v-show="!row.row.popular"
            >否</el-tag
          >
        </div>
      </template>
      <!-- 操作 -->
      <template v-slot:isoperation="row">
        <div @click="isoperationFn(row.row)">
          <el-row>
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
          </el-row>
        </div>
      </template>
      <template v-slot:formSolt>
        <div>
          <el-input placeholder="标题" v-model="input" clearable class="input">
          </el-input>
          <el-button
            type="success"
            size="mini"
            icon="el-icon-search"
            @click="SpecificationFn()"
            >搜索</el-button
          >
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-refresh"
            @click="reset()"
            >重置</el-button
          >
        </div>
      </template>
      <template v-slot:btnSolt>
        <div class="bannerBtn">
          <el-button
            type="success"
            size="mini"
            icon="el-icon-plus"
            @click="shopAddFn()"
            >添加</el-button
          >
          
        </div>
      </template>
    </supertable>
    
    <!-- 分页 -->
    <div>
      <el-pagination
        :page-sizes="[10, 20, 50, 100, 500]"
        :pager-count="5"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="sizeChange"
        @current-change="currentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import supertable from "@/components/supertable";
import {
  CommoditySpecificationMain,
  changeIsOnSaleInterface
} from "@/api/ShopManagement";
export default {
  name: "CommoditySpecification",
  data() {
    return {
      dialogVisible: false,
      input: "",
      pages: 1,
      limit: 20,
      total: 0,
      headerData: [
        {
          prop: "name",
          label: "名称",
          width: "",
        },
        {
          prop: "minigraph",
          label: "小图",
          width: "",
          slot: true
        },
        {
          prop: "classify",
          label: "类别",
          width: ""
        },
        {
          prop: "introduction",
          label: "产品简介",
          width: ""
        },
        {
          prop: "isOnSale",
          label: "上架",
          width: "",
          slot: true
        },
        {
          prop: "newgoods",
          label: "是否推荐新品",
          width: "",
          slot: true
        },
        {
          prop: "popular",
          label: "是否人气商品",
          width: "",
          slot: true
        },
        {
          prop: "createTime",
          label: "上架时间",
          width: ""
        },
        {
          prop: "isoperation",
          label: "操作",
          width: "",
          slot: true
        }
      ],
      tableData: [],
      CommoditySpecificationMainList: []
    };
  },
  mounted() {
    let _self = this;
    _self.SpecificationFn();
  },
  methods: {
    // 关闭弹窗
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    // 添加
    SpecificationAdd() {
      let _self = this;
      _self.dialogVisible = true;
    },
    SpecificationDelete() {},
    // 重置
    reset() {
      let _self = this;
      _self.input = "";
      _self.SpecificationFn();
    },
    // 接口
    async SpecificationFn() {
      let _self = this;
      _self.tableData = [];
      let data = {
        name: _self.input.trim(),
        limit: _self.limit,
        pages: _self.pages 
      };
      await CommoditySpecificationMain(data).then(res => {
        let _self = this;
        console.log(res);
        let { records } = res.data;
        if (res.code = 20000) {
          _self.total = res.data.total;
          for (let item of records) {
            _self.tableData.push({
              name: item.name,
              minigraph:
                "http://localhost:9528/dev-api/file/getImgStream?idFile=" +
                item.pic,
              introduction: item.descript,
              newgoods: item.isNew,
              popular: item.isHot,
              classify: item.category.name,
              isOnSale: item.isOnSale,
              id: item.id,
              createTime: item.createTime,
              limit: data.limit,
              pages: data.pages,
              total:data.total
            });
          }
        }
      });
    },
    // changeIsOnSaleFn() {
    // changeIsOnSaleInterface(data.id, data.isOnSale).then(response => {
    //     this.$message({
    //       message: data.isOnSale ? "上架成功" : "下架成功",
    //       type: "success"
    //     });
    //   });
    // }
    changeIsOnSaleFn(row) {
      let _self = this;
      // console.log(row);
      let data = {
        id: row.id,
        isOnSale: row.isOnSale
      };

      changeIsOnSaleInterface(data).then(res => {
        // console.log(res.data);
        if ((res.code = 20000)) {
          _self.tableData.push({
            id: res.data.id,
            isOnSale: !res.data.isOnSale
          });
          this.$message({
            message: data.isOnSale ? "上架成功" : "下架成功",
            type: "success"
          });
        }
      });
    },
    // 商品编辑
    isoperationFn(row) {
      let _self = this;
      console.log(row.id)
      _self.$router.push({
        name: "ProductEditing",
        query:{
          id:row.id
        }
      });
    },
    // 商品添加
    shopAddFn(){
      let _self = this;

      _self.$router.push({
        name: "ProductEditing",
      });
    },
    // 分页
    sizeChange(val) {
      let _self = this;
      _self.limit = val;
      _self.SpecificationFn();
    },
    currentChange(val) {
      let _self = this;
      _self.pages = val;
      _self.SpecificationFn();
    }
  },
  components: {
    supertable
  }
};
</script>
<style lang="">
.input {
  margin: 20px;
  width: 400px;
}
.el-image__inner {
  width: 50px;
  height: 50px;
  margin: 0 auto;
}

.el-table_1_column_5 > div {
  text-align: left;
}
.el-table_1_column_2 > div {
  text-align: left;
}
</style>
